<template>
  <div id="wrapper">
<!--    <el-container>-->
<!--      <el-header>-->
<!--        <div>-->
<!--            <span>简易工具系统</span>-->
<!--        </div>-->
<!--        <div>-->
<!--            <i class="el-icon-user-solid"></i>-->
<!--            <span class="user" icon="el-icon-user-solid">谢以轩</span>-->
<!--            <el-button type="info" size="mini">注销</el-button>-->
<!--        </div>-->
<!--      </el-header>-->
<!--      <el-container>-->
<!--        <el-aside width="">-->
<!--          <nav-menu></nav-menu>-->
<!--        </el-aside>-->
<!--        <el-main :styles="{padding : 0}">-->
<!--          <router-view></router-view>-->
<!--        </el-main>-->
<!--      </el-container>-->
<!--    </el-container>-->
    <el-container class="container" id="main">
      <el-container style="position: relative;">
        <el-aside width="230px" class="aside">
          <aside-view />
        </el-aside>
        <el-container >
          <el-header class="header" height="50px" style="-webkit-app-region: drag">
            <header-view height="50px" />
          </el-header>
          <el-main class="main">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>

          </el-main>
        </el-container>
        <!--<playlist/>-->
      </el-container>
    </el-container>

  </div>
</template>

<script>
import NavMenu from '../../components/NavMenu.vue'
import HeaderView from '../../components/Header'
import AsideView from '../../components/Aside/index'

export default {
    components: {
      NavMenu,
      HeaderView,
      AsideView
    },
    name: 'home'
  }
</script>

<style>
/*.el-header{*/
/*    background-color: #545c64;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    padding-left: 0;*/
/*    align-items: center;*/
/*    color: #fffdef;*/
/*    font-size: 15px;*/
/*}*/
/*.el-header div{*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/
/*.el-header div span {*/
/*    margin-left: 15px;*/
/*}*/
/*.el-button{*/
/*    align-items: center;*/
/*}*/
.container {
  height: 100vh;
}

.header {
  background: #fafafa;
}
.main {
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex: 1;
  flex-shrink: 0;
}
.aside {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #efefef, #efefef);
}

</style>
